<template>
	<div>
		<div id="root">
			<div class="todo-container">
				<div class="todo-wrap">
					<MyHeader @recevice="recevice" />
					<MyList :todos="todos" />
					<MyFooter :todos="todos" @allCheckTodo="allCheckTodo" @clearDoneTodo="clearDoneTodo" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyList from "./components/MyList.vue";
import MyFooter from "./components/MyFooter.vue";

export default {
	name: "App",
	components: {
		MyHeader,
		MyList,
		MyFooter,
	},
	data() {
		return {
			todos: JSON.parse(localStorage.getItem("todos")) || []
		}
	},
	methods: {
		// 接收添加任务
		recevice(todoObj) {
			if (this.todos.some(item => item.name === todoObj.name)) {
				return alert("请不要添加重复任务")
			}

			this.todos.unshift(todoObj)
		},
		// 勾选任务
		checkDone(id) {
			this.todos.forEach(item => {
				if (item.id === id) {
					item.done = !item.done
				}
			})
		},
		// 删除
		todoDelete(id) {
			this.todos = this.todos.filter(item => item.id !== id)
		},
		// 全选
		allCheckTodo(value) {
			this.todos.forEach(item => {
				item.done = value
			})
		},
		// 清除已完成
		clearDoneTodo() {
			this.todos = this.todos.filter(item => !item.done)
		},
		// 编辑
		todoEdit(id, value) {
			this.todos.forEach(item => {
				if (item.id === id) {
					item.name = value
				}
			})
		}
	},
	// 开启数组的深度监视
	watch: {
		todos: {
			deep: true,
			handler(value) {
				localStorage.setItem("todos", JSON.stringify(value))
			}
		}
	},
	mounted() {
		// 绑定事件到全局事件总线上，接收后代组件的数据
		this.$bus.$on("checkDone", this.checkDone)
		this.$bus.$on("todoDelete", this.todoDelete)
		this.$bus.$on("todoEdit", this.todoEdit)
	}
};
</script>

<style>
/*base*/
body {
	background: #fff;
}

.btn {
	display: inline-block;
	padding: 4px 12px;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 1px 2px rgba(0, 0, 0, 0.05);
	border-radius: 4px;
}

.btn-danger {
	color: #fff;
	background-color: #da4f49;
	border: 1px solid #bd362f;
}

.btn-edit {
	color: #fff;
	background-color: skyblue;
	border: 1px solid rgb(84, 150, 176);
	margin-right: 5px;
}

.btn-danger:hover {
	color: #fff;
	background-color: #bd362f;
}

.btn:focus {
	outline: none;
}

.todo-container {
	width: 600px;
	margin: 0 auto;
}

.todo-container .todo-wrap {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
}
</style>